import React from 'react'
import cx from 'classnames'
import style from './style'
import {FieldContainer, FieldBox} from '../form'


class Select extends React.Component {
  constructor(props) {
    super(props);
  
    this.state = {
      error: false,
      active: false
    }
  }

	componentDidMount() {
		this.el = this.refs.el
	}

	reset() {
		this.index(0)
		this.props.onChange({
			target: { value: this.el.value }
		})
	}

	val(value) {
		if (value != null) {
			this.el.value = value
			this.props.onChange({
				target: { value }
			})
		} else {
			return this.el.value
		}
	}
	
	index(index) {
		if (index != null) {
			this.el.selectedIndex = index
			this.props.onChange({
				target: { value: this.el.value }
			})
		} else {
			return this.el.selectedIndex
		}
	}

  render() {
    const { tip,disabled, label, labelWidth, name, required, className, children, bubbleList,width, ...others } = this.props
    return (
      <FieldBox
        className={cx({
          [this.props.className]: this.props.className
        })}
        label={label}
        name={name}
        required={required}
        tip={tip}
        labelWidth={labelWidth}
      >
        <FieldContainer
          hasBox={true}
          active={this.state.active}
          error={this.state.error}
          msg={this.state.msg}
          className={className}
          bubbleList={bubbleList}
          width={width}
          disabled={disabled}
        >
          <select 
            ref='el' 
            {...others}
            disabled={disabled}
            className={style['select']}
          >
            { children }
          </select>
        </FieldContainer>
      </FieldBox>
    )
  }
}

export default Select
